<template>
  <view class="search">
    <fui-search-bar @search="search"></fui-search-bar>
    <view v-if="dataList.length> 0" class="data-list">
      <PopularCar  :showStatus="false" :item="item" :index="index" v-for="(item,index) in dataList" :key="item.id"></PopularCar>
    </view>
    <NoData v-else />
  </view>
</template>

<script setup lang="ts">
import dyPlayingService from "@/api/dyPlayingService";
import type{ ISearchNameResponse } from "@/api/model/dyPlayingModel";
import PopularCar from "@/components/PopularCar/PopularCar.vue";
import NoData from "@/components/NoData/NoData.vue";

const pageNo=ref(1)
const pageSize=ref(10)
const status = ref(true)
const dataList  = ref<Array<ISearchNameResponse>>([])
const search =  (e:any)=>{
  if(e.detail.value){
    dataList.value = []
    pageNo.value = 1;
    status.value = true
    getData(e.detail.value)
  }
}
const getData = async (content:string)=>{
  if(status.value){
   const {success,result} = await dyPlayingService.searchName({
      pageNo:pageNo.value,
      pageSize:pageSize.value,
      content:content
    })
    if(success){
      pageNo.value ++;
      dataList.value.length > 0 ?  dataList.value = dataList.value.concat(result) : dataList.value = result
      if(result.length < pageSize.value){
        status.value = false
      }
    }
  }
}
onLoad((data:any)=>{
  data.data && getData(data.data)
})
</script>

<style lang="scss" scoped>
.data-list{
  margin: 5% 8%;
}
</style>
